/**
* 作者 ：sunmeng
*
* 日期 ：2017/11/21
*
* 描述 ：日志
*/
<template>
  <el-container class="is-vertical">
    <HeaderBar :menuState="menuState"></HeaderBar>
    <BreadCrumb :options="breadOptions" class="breadcreamb"></BreadCrumb>
    <el-main class="search">
    	<div class="demo-input-suffix">
			  <el-input class="searchText"
			    placeholder="请输入内容"
			    v-model="input">
			  </el-input>
			  <el-button type="primary" icon="el-icon-search"></el-button>
			</div>
      <MTable :options="tableOptions" ref="myTable" class="tablebar"></MTable>
    </el-main>
  </el-container>
</template>
<script>
	import axios from '../../plugins/axios'
  import HeaderBar from '../../components/header/Header.vue'
  import BreadCrumb from '../../components/breadcrumb/BreadCrumb.vue'
  import MTable from '../../components/table/Table.vue'

  export default {
    name: 'search',
    components: {
      HeaderBar,
      BreadCrumb,
      MTable
    },
    data () {
    	let vm = this;
      return {
        menuState: "systemLog",
        input:"",
        breadOptions:{
        	bread:[
            {
              label:"政务数据资源管理系统",
              path:"/"
            },{
              label:"日志",
              path:"/systemLog/main"
            }
        	]
        },
        tableOptions: {
          handleSelectionChange (rows) {
	        },
        }
      }
    },
    mounted () {
      let vm = this,
        pageNo = 1,
        pageSize = 10,
        total = 400,
        dataList = [];

      axios.get(`/portalInterface/goods/category`).then(res => {
        let { data } = res
        dataList = data.result
        vm.initTable(dataList, pageNo, pageSize, total)
      })
    },
    methods: {
      initTable (dataList, pageNo, pageSize, total) {
        let vm = this
        vm.tableOptions = {
        	handleSelectionChange (rows) {
	        },
          thead: [{
            prop: "categoryId", // 数据的key值
            label: "序号"
          },{
            prop: "categoryName", // 数据的key值
            label: "操作人"
          },{
            prop: "categoryName", // 数据的key值
            label: "行为"
          },{
            prop: "categoryName", // 数据的key值
            label: "时间"
          }],
        data: dataList,
        pageInfo: {
            currentPage: pageNo,
            pageSizes: [1, 2, 3, 4],
            pageSize: pageSize,
            layout: "total, sizes, prev, pager, next, jumper",
            total: total,
            handleSizeChange (val) {
              vm.changePageSize(val)
            },
            handleCurrentChange (val) {
              vm.loadMore(val)
            }
        }
        }
      },
      loadMore (currentPage) {
        alert(`handleCurrentChange: ${currentPage}`)

        let vm = this
        let pageNo = 1
        let pageSize = 10
        let total = 400
        let dataList = [{
          date: '2016-05-02',
          name: '王小虎5',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎6',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎7',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎8',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
        vm.initTable(dataList, pageNo, pageSize, total)
      },
      changePageSize (pageSize) {
        alert(`handleSizeChange: ${pageSize}`)
      }
    }
  }
</script>
<style>
	.tablebar{
		width: 94%;
		margin: 0 auto;
	}
	.search .searchText{
		width: 350px;
		margin-bottom: 20px;
	}
</style>
